<template>
	<view class="diary-add">
		<view class="title content-center">
			<textarea
				:disabled="type == 1"
				class="textarea"
				maxlength="255"
				v-model="title"
				placeholder-style="color:#999;"
				placeholder="请输入日记标题"
			/>
		</view>
		<view class="content content-center">
			<textarea
				:disabled="type == 1"
				class="textarea"
				maxlength="-1"
				v-model="content"
				placeholder="请输入日记"
			/>
			<view class="top-title ui-flex">
				<view class="label">{{ showDate }}</view>
				<view class="label">|</view>
				<view
					class="label"
					@tap="setModel(true)"
					style="max-width: 120px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"
				>
					{{ !!weather ? weather : '天气' }}
				</view>
				<view class="my-flex"></view>
				<view class="label">{{ sumContent }}字</view>
			</view>
		</view>
		<view
			style="z-index: 888;border-top: 1px solid #999;transition: All 0.3s ease-out;-webkit-transition: All 0.3s ease-in-out;-moz-transition: All 0.3s ease-in-out;-o-transition: All 0.3s ease-in-out;position:fixed; bottom:0; left:0; width: 100%; height: 240px;z-index: 1000;background: #FFF;border:none;"
			:class="{ hidden: !isWeatherModelShow }"
		>
			<view style="padding: 15px;background-color: #FFF;">
				<view style="color: #636163;margin: 0px 0px 6px 0px;display: flex;">
					<view>天气</view>
					<view style="flex:1"></view>
					<view @tap="getWeather(weather)">
						<faicon
							type="cloud"
							color="#333"
							size="22"
							style="margin-right: 10px;"
						></faicon>
					</view>
				</view>
				<textarea
					:disabled="type == 1"
					v-model="weather"
					class="scroll-box"
					placeholder="输入城市名后点右上角图标可获取对应当日天气信息..."
					style="border:1px solid #999;color: #636163;line-height: 1.3;font-size: 15px;margin-top: 5px;width: 100%;height: 135px; max-height: 135px; border-color: #F7CF84;resize:none;"
				></textarea>
			</view>
			<view
				style="background-color: #FFF;height: 45px;display: flex;border-top: 1px solid #E1E1E1;top: -1px;position: relative;"
			>
				<view style="flex: 3;"></view>
				<button
					style="box-shadow: none;border: none;border-radius: 0;"
					type="primary"
					@tap="setModel(false)"
				>
					确认
				</button>
			</view>
		</view>
		<view class="submit-btn content-center" v-show="type != 1" @tap="submit">
			<faicon type="check" color="#fff" size="24"></faicon>
		</view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more';
import { mapActions, mapGetters } from 'vuex';
import { addParams, editParams } from '@/utils/sql.js';
import '@/utils/dateFormat.js';
export default {
	data() {
		return {
			id: null,
			type: 0,
			title: '',
			content: '',
			weather: '',
			date: null,
			isWeatherModelShow: false
		};
	},
	async onLoad(option) {
		this.showLoading('加载中..', true);
		this.id = option.id;
		this.type = option.type == 1 ? 1 : 0;
		this.date = new Date();
		if (this.id == null) {
			uni.setNavigationBarTitle({
				title: '写日记'
			});
		} else {
			uni.setNavigationBarTitle({
				title: '日记详细'
			});
		}
		await this.initData();
		this.hideLoading('加载中..', true);
	},
	methods: {
		initData() {
			return new Promise((resolve, reject) => {
				if (!this.id) resolve();
				else {
					if (this.type == 1) {
						this.$api['fun/diaryOneForFriend']({
							id: this.id
						}).then(({ data, code, msg }) => {
							if (code == 0 && data.length == 1) {
								let obj = data[0];
								this.title = this.showEmoji(obj.title);
								this.content = this.showEmoji(obj.content);
								this.weather = this.showEmoji(obj.weather);
								this.date = new Date(obj.create_date);
							} else {
								this.msg('没有找到对应日记');
								uni.navigateBack();
							}
							resolve();
						});
					} else {
						this.$api['fun/diaryOneForMy']({
							id: this.id
						}).then(({ data, code, msg }) => {
							if (code == 0 && data.length == 1) {
								let obj = data[0];
								this.title = this.showEmoji(obj.title);
								this.content = this.showEmoji(obj.content);
								this.weather = this.showEmoji(obj.weather);
								this.date = new Date(obj.create_date);
							} else {
								this.msg('没有找到对应日记');
								uni.navigateBack();
							}
							resolve();
						});
					}
				}
			});
		},
		setModel(flag) {
			this.isWeatherModelShow = flag;
		},
		getWeather(city) {
			if (!city || city.length > 8) return;
			this.$api['third/robot']({ info: city + '的天气' }).then(({ code, text }) => {
				if (code == 100000) {
					if ('请问你想查询哪个城市' == text) text = this.weather;
					this.weather = text || '';
				}
			});
		},
		submit() {
			if (!this.title || this.title == '请输入日记标题...') {
				this.title = this.date.Format('yyyy-MM-dd HH:mm:ss')
			}
			if (!this.content || this.content == '请输入日记内容...') {
				this.msg('日记内容不能为空..');
				return;
			}
			let diary = {
				title: this.saveEmoji(this.title).substr(0, 250),
				content: this.saveEmoji(this.content),
				weather: this.saveEmoji(this.weather).substr(0, 250),
				user: this.userInfo.user_id,
				author: this.userInfo.name
			};
			if (!this.id) {
				// 为空添加
				this.addDiary(diary);
			} else {
				// 不为空修改
				this.editDiary(diary, this.id);
			}
		},
		addDiary(diary) {
			this.showLoading('保存中..');
			this.$api['data/add'](addParams('diary', diary)).then(({ data, code, msg }) => {
				this.hideLoading();
				if (code == 0 && data > 0) {
					this.success('保存成功');
					setTimeout(() => {
						uni.navigateBack();
					}, 800);
				} else {
					this.$emit('msg', msg);
				}
			});
		},
		editDiary(diary, id) {
			this.showLoading('保存中..');
			this.$api['data/edit'](editParams('diary', diary, id)).then(({ data, code, msg }) => {
				this.hideLoading();
				if (code == 0 && data > 0) {
					this.success('保存成功');
					setTimeout(() => {
						uni.navigateBack();
					}, 800);
				} else {
					this.$emit('msg', msg);
				}
			});
		}
	},
	computed: {
		...mapGetters(['wxInfo', 'userInfo']),
		sumContent() {
			return this.content.length > 9999 ? '9999+' : this.content.length;
		},
		showDate() {
			return this.date.Format('yyyy年MM月dd日');
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.diary-add {
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
	.title {
		height: 7%;
		margin-bottom: 3%;
		border-radius: 5px;
		padding: 10px;
		border: 1px solid #999;
		box-sizing: border-box;
		.textarea {
			height: 22px;
			font-size: 15px;
			width: 100%;
			color: #616361;
		}
	}
	.content {
		height: 91%;
		border-radius: 5px;
		border: 1px solid #999;
		padding-top: 20px;
		box-sizing: border-box;
		position: relative;
		.textarea {
			height: 96%;
			width: 94%;
			color: #616361;
			font-size: 15px;
		}
		.top-title {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 30px;
			line-height: 30px;
			font-size: 13px;
			padding-right: 10px;
			box-sizing: border-box;
			.label {
				color: #616361;
				margin-left: 10px;
			}
		}
	}
	.hidden {
		transform: translate3d(0px, 250px, 0px);
		-webkit-transform: translate3d(0px, 250px, 0px);
		-moz-transform: translate3d(0px, 250px, 0px);
		-o-transform: translate3d(0px, 250px, 0px);
		-ms-transform: translate3d(0px, 250px, 0px);
	}
	.submit-btn {
		border-radius: 50%;
		position: absolute;
		width: 60px;
		height: 60px;
		background: #4f77e6;
		right: 25px;
		bottom: 25px;
		&:active {
			background: rgba(0, 0, 0, 0.3);
		}
		z-index: 999;
	}
}
</style>
